//搜索组件封装import React from 'react';
import './index.scss';
import React from 'react';
//业务商品搜索组件
class SearchProduct extends React.Component{
  constructor(props){
    super(props);
    //searchType:productId或者productName
    this.state={
      searchType: 'productId', 
      searchKeyWord: ''
    }
    this.onSearch = this.onSearch.bind(this);
  }
  //搜索类型选择的时候
  onValueChange(e){
    let name = e.target.name,
        value = e.target.value.trim();
    this.setState({
      [name] : value
    });
  }
  //点击查询的时候，向父组件传递两个数据
  onSearch(){
   this.props.onFatherSearch(this.state.searchType,this.state.searchKeyWord);
  }
  //输入框回车后自动提交
  onSearchKeyUp(e){
    if(e.keyCode === 13){
     this.onSearch();
    }
  }
 
 render(){
      return(
        <div className="row">
            <div className="col-md-12">
              <div className="form-inline search-wrapper">
                  <div className="form-group">
                        <select  className="form-control"
                                 name="searchType"
                                 onChange={e=>{this.onValueChange(e)}}>
                          <option value="productId">按商品ID查询</option>
                          <option value="productName">按商品名称查询</option>
                        </select>
                  </div>
                  <div className="form-group">
                        <input type="text" 
                               name="searchKeyWord"
                               onKeyUp={e=>{this.onSearchKeyUp(e)}}
                               onChange={e=>{this.onValueChange(e)}} 
                               className="form-control" 
                               id="exampleInputPassword3"
                               placeholder="关键词" />
                  </div>  
                  <button  className="btn btn-primary" onClick={(e)=>{this.onSearch()}}>查询</button>
              </div>
            </div>
        </div>
      )
    }
  }
export default SearchProduct;

